<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-button @click="giftDialogVisible = true">修改密码</el-button>
      <el-button @click="resetshow = true" v-if="user1.power <= 2"
        >重置密码</el-button
      >
      <el-button @click="sendDialogVisible = true" v-if="user1.power < 2"
        >用户管理</el-button
      >

      <el-dialog
        title="修改密码"
        :visible.sync="giftDialogVisible"
        width="400px"
      >
        <input type="text" v-model="user.username" />
        <input type="text" v-model="user.password" />
        <input type="text" v-model="user.newpassword" />
        <el-button @click="serpassword">确认</el-button>
      </el-dialog>

      <el-dialog title="重置密码" :visible.sync="resetshow" width="400px">
        <label for="">用户名</label>
        <input type="text" v-model="formdata.username" />
        <el-button @click="resetpassword">重 置</el-button>
      </el-dialog>

      <el-dialog
        title="人员转移/删除"
        :visible.sync="sendDialogVisible"
        width="600px"
      >
        <el-row>
          <el-col :span="12">
            <!-- 树形控件 -->
            <p>选择转移人员</p>
            <el-tree
              :props="treeProps"
              :load="loadProps"
              lazy
              show-checkbox
              accordion
              check-strictly
              node-key="_id"
              ref="treeRef"
            ></el-tree>
          </el-col>
          <el-col :span="12">
            <p>移动到(这里只能选择一个)</p>
            <!-- 树形控件 -->
            <el-tree
              :props="treeProps"
              :load="loadProps"
              lazy
              show-checkbox
              accordion
              check-strictly
              node-key="_id"
              ref="RtreeRef"
            ></el-tree>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="sendDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="transferUser()">转 移</el-button>
          <el-button
            type="primary"
            @click="delUser($refs.treeRef.getCheckedNodes())"
            >删 除</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      user1: {},
      giftDialogVisible: false,
      formdata: {
        username: "",
      },
      resetshow: false,
      sendDialogVisible: false,
      //   树形控件的属型绑定对象
      treeProps: {
        label: "username",
        children: "children",
        isLeaf: "leaf",
      },
    };
  },
  created() {
    this.user1 = JSON.parse(window.localStorage.getItem("user"));
  },
  methods: {
    async serpassword() {
      const { data: res } = await this.$http.post("hx/setpassword", this.user);
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
      }
      this.$message.success(res.meta.msg);
    },
    async resetpassword() {
      const { data: res } = await this.$http.post(
        "hx/repassword",
        this.formdata
      );
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
      }
      this.$message.success(res.meta.msg);
    },
    // 动态加载人物
    async loadProps(node, resolve) {
      const { data: res } = await this.$http.get("hx/usertree", {
        params: node.data,
      });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      // 限制最高子节点 这里用isLeaf 不需要这个
      // if (node.level > 4) return resolve([])
      resolve(res.data);
    },
    // 转移
    async transferUser() {
      // 待转移
      let people = this.$refs.treeRef.getCheckedNodes();
      // 转移的目标
      let Tpeople = this.$refs.RtreeRef.getCheckedNodes();

      if (people.length === 0) {
        return this.$message.error("请选择用户! ");
      }

      if (Tpeople.length === 0 || Tpeople.length > 1) {
        return this.$message.error("只能选择一个目标! ");
      }

      const { data: res } = await this.$http.post("/hx/transferUser", {
        people: people,
        Tpeople: Tpeople,
      });

      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
        return;
      }

      this.updateTree();
      this.$message.success("转移成功!");
    },

    // 刷新树
    updateTree() {
      // 清空选择
      // this.$refs.treeRef.setCheckedKeys([]);
      let node = this.$refs.treeRef.getNode("5f309ff69163cd1f304258aa");
      let node2 = this.$refs.RtreeRef.getNode("5f309ff69163cd1f304258aa");

      node.loaded = false;
      node.expand();

      node2.loaded = false;
      node2.expand();
    },
    // 删除
    async delUser(people) {
      if (people.length === 0) {
        return this.$message.error("请选择删除的用户! ");
      }

      const { data: res } = await this.$http.post("/hx/deluser", {
        people: people,
      });

      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg);
        return;
      }
      this.updateTree();
      this.$message.success("删除成功!");
    },
  },
};
</script>

<style lang="less" scope>
.el-dialog {
  input {
    display: block;
  }
}

.el-tree {
  border: 1px solid #c6e2ff;
  margin-right: 30px;
}

.el-col {
  p {
    color: red;
  }
}
</style>